<template>
  <div>
    <div>
        <div>姓名:{{ p.name }}</div>
        <div>年龄:{{ p.age }}</div>
        <div>妻子:{{ p.wife.name }}---{{ p.wife.age}}</div>
    </div>
    <div>
        <button @click="p.age++">更改</button>
        <button @click="p.wife.age++">更改wife</button>
    </div>
  </div>
</template>

<script lang='ts' setup>
import {reactive,watch} from 'vue'
let p=reactive({
    name:'Giles',
    age:30,
    wife:{
        name:'Monica',
        age:28
    }
})
//如果要侦听的是reactive变量中的属性，应该数据源使用回调函数
watch(()=>p.wife.age,(newval,oldval)=>{
    console.log(newval,oldval);
    
})
</script>

<style lang='scss' scoped>
</style>